import { createMemo, splitProps, type Component } from "solid-js";
import type { FcRangeProps } from "./types";
import { wrapClasses } from "@lib/types";
import type { JSX } from "solid-js/jsx-runtime";

const FcRange: Component<FcRangeProps> = (props) => {
  const [local, elProps] = splitProps(props, [
    "value",
    "onValueChanged",
    "$ServerOnly",
    "ref",
    "classList",
  ]);
  const classList = createMemo(() => wrapClasses(local.classList));
  const handleValueChanged: JSX.InputHTMLAttributes<HTMLInputElement>["onChange"] =
    (e) => {
      local.onValueChanged?.(e.target.value as any);
    };

  return (
    <input
      type="range"
      class="form-range"
      ref={local.ref}
      {...elProps}
      classList={classList()}
      onChange={handleValueChanged}
    ></input>
  );
};

export default FcRange;
